CSS 网格布局和无障碍

CSS 网格布局中需要注意的另一个问题（在 CSS Flex 布局中程度较轻），是标记变平的诱惑。我们已经知道，一个项目要成为一个网格项目，它需是网格容器的直接子项目，因此，如果在网格容器中有一个 元素，那么这个 ul 是一个网格项目，但子元素 并不是网格项目。

如果 display 属性的 subgrid 值得以实现，则可以通过将 ul 元素声明为 subgrid 来使网格项目的这些子元素参与到整个网格布局中。目前唯一的解决方法是使用 display：contents 使 ul 生成的方框从 DOM 中消失。有关此相互影响的更多信息，请参阅本指南的网格布局与其他布局方法的关系一文及文中的 display: contents 部分。

由于对可互相影响的 display: contents 的支持有限，而且 subgrid 还没得到支持，所以当开发一个使用 CSS 网格布局的网站时，为了简单地创建布局，不可避免地要受到标签扁平化和移除语义元素的诱惑。例如，某些内容在语义上被标记为列表，但是为了通过 display: grid 将这些元素设置为容器的直接子元素，可能会决定用一组 标签来替代。要抵抗这种诱惑，找到不删除标记的设计方法。从一个结构良好的文档开始，是避免这个问题是一个好办法，当不得已去修改文档时，你就会意识到，你将仅是为了让布局工作而要删除语义元素！